<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="box">
      {{title}}
    </div>
    <div id="box2">
      [[name]]
    </div>
	</body>
  <script src="../vue.js"></script>
  <script>
    const vm = new Vue({
      el:"#box",
      data:{
        title:"哈哈哈"
      }
    })
    
    
    // var name = "admin";
    // 
    // var obox2 = document.getElementById("box2")
    // var str = obox2.innerHTML
    // str = str.replace(/\[\[name\]\]/,name);
    // obox2.innerHTML = str;
    
    // 监听到name变量被修改了
    // 执行
    
    // 定义一个变量,用来作为数据和逻辑的载体
    var obj = {
      // 定义私有属性,仅供对象内部使用
      _name:"admin",
      // 定义启动函数
      init(){
        // 提前获取元素
        this.obox2 = document.getElementById("box2");
        // 提前获取元素内容
        this.str = this.obox2.innerHTML;
        // 调用初始数据的访问器
        obj.name
      },
      get name(){   // name属性的访问器
        // console.log("name被访问了")
        this.obox2.innerHTML = this.str.replace(/\[\[name\]\]/,this._name);
        // 访问器的固定语法,必须主动返回数据,否则当前属性的值为undefined
        return this._name
      },
      set name(v){  // name属性的控制器，默认接收修改后的值
        // console.log("name被修改了，改成了" + v)
        this.obox2.innerHTML = this.str.replace(/\[\[name\]\]/, v);
        // 因为访问器,在以私有属性_name作为name的返回值,所以,控制器中的修改操作,对应到私有属性_name即可
        this._name = v
      }
    }
    
    
    // 启动
    obj.init();
    
    
  </script>
</html>
